<template>
  <div class="login">
    <van-nav-bar>
      <template #left>
        <i @click="goBack" class="iconfont iconbtn_nav_back myicon"></i>
      </template>
    </van-nav-bar>
    <div class="content">
      <h2>您好，请登录</h2>
      <!-- 表单 -->
      <van-form ref="form" @submit="goLogin">
        <!-- 手机号 -->
        <van-field
          v-model="user.mobile"
          :rules="rules.mobile"
          name="mobile"
          placeholder="请输入手机号"
        >
          <template #left-icon>
            <i class="iconfont iconbianzu1"></i>
          </template>
        </van-field>
        <!-- 验证码 -->
        <van-field
          v-model="user.code"
          :rules="rules.code"
          placeholder="请输入验证码"
        >
          <template #button>
            <span class="globalColor" @click="getCode">{{
              isBack ? time + 'S后重新获取' : '获取验证码'
            }}</span>
          </template>
          <template #left-icon>
            <i class="iconfont iconyanzhengma"></i>
          </template>
        </van-field>
        <p class="agreement">
          登录即同意
          <span class="globalColor">《用户使用协议》</span>
          和
          <span class="globalColor">《隐私协议》</span>
        </p>
        <!-- 登录按钮 -->
        <div>
          <van-button round block type="danger" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { apiGetCode, apiLogin } from '@/api/au.js'
import { setLocal } from '@/utils/local'
export default {
  data () {
    return {
      isBack: false,
      time: 60,
      timerId: null,
      user: {
        mobile: '18511111111',
        code: ''
      },
      // 规则验证
      rules: {
        mobile: [
          { required: true, message: '请填写手机号', trigger: 'onBlur' },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请填写正确的手机号',
            trigger: 'onBlur'
          }
        ],
        code: [
          { required: true, message: '请填写验证码', trigger: 'onBlur' },
          {
            pattern: /^\d{4}$/,
            message: '请填写正确的验证码',
            trigger: 'onBlur'
          }
        ]
      }
    }
  },
  methods: {
    // 顶部返回
    goBack () {
      const redirect = this.$route.query.redirect
      if (redirect) {
        this.$router.push('/find')
      } else {
        this.$router.go(-1)
      }
    },
    // 获取验证码
    async getCode () {
      try {
        // 表单局部验证
        await this.$refs.form.validate('mobile')
        // 判断当前是否在获取验证码
        if (this.isBack) {
          return
        }
        this.isBack = true
        this.timerId = setInterval(() => {
          this.time--
          if (this.time < 0) {
            this.time = 60
            clearInterval(this.timerId)
            this.isBack = false
          }
        }, 1000)
        this.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: '获取中'
        })
        // 获取验证码
        const res = await apiGetCode(this.user.mobile)
        this.$toast.success(res.data)
      } catch (error) {
        this.$toast.fail(error.message)
      }
    },

    // 登录
    async goLogin () {
      this.$toast.loading({
        duration: 0
      })
      try {
        const res = await apiLogin(this.user)
        console.log(res)
        // 保存用户信息到vuex中
        this.$store.commit('setUserInfo', res.data.user)
        setLocal('token', res.data.jwt)
        this.$toast.success('登录成功')
        const redirect = this.$route.query.redirect
        if (redirect) {
          this.$router.push(redirect)
        } else {
          this.$router.push('/my')
        }
      } catch (error) {}
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  height: 100%;
  background: #fff;
  font-size: 12px;
  /deep/.van-nav-bar {
    height: 44px;
    box-shadow: 0px 4px 8px 0px rgba(24, 26, 57, 0.04);
  }
  /deep/.van-nav-bar__left {
    padding-left: 0px;
  }
  .myicon {
    font-size: 50px;
  }
  .content {
    padding: 0 15px;
    h2 {
      font-size: 18px;
      margin-top: 50px;
      margin-bottom: 65px;
    }
  }
  .globalColor {
    color: #00b8d4ff;
  }
  .agreement {
    margin-top: 15px;
    margin-bottom: 44px;
  }
}
</style>
